---
title: useToken | gluestack-ui
description: useToken is a custom hook to resolves design tokens from the theme

showHeader: false
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="ui/Components/Hooks/useToken" />

# useToken

**useToken** is a custom hook to resolves design tokens from the theme.

### Import

To use the `useToken` in your project, import `useToken`from`@gluestack-ui/themed` as demonstrated below.

```jsx
import { useToken } from '@gluestack-ui/themed';
```

Let's use our `useToken` value to give background color to `View` from `react-native`.

```jsx
import { View } from 'react-native';
import { useToken } from '@gluestack-ui/themed';

function Example() {
  const resolvedGreen = useToken('colors', 'green500');
  return (
    <View
      style={{
        width: 100,
        height: 100,
        backgroundColor: resolvedGreen,
      }}
    />
  );
}
```
